<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet" href="fontico/iconfont.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui.plusReady(function() {
				//设置顶部标题栏样式
				plus.navigator.setStatusBarStyle("light");
				//设置顶部标题栏颜色
				plus.navigator.setStatusBarBackground("#C9394A");
			});
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav title">
			<h1 class="mui-title title-color" id="xinjian_title"><b>信笺</b></h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" tabindex="0">
				<span class="mui-icon iconfont icon-liaotian"></span>
				<span class="mui-tab-label">信笺</span>
			</a>
			<a class="mui-tab-item" tabindex="1">
				<span class="mui-icon iconfont icon-iconfontzhizuobiaozhun0258"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" tabindex="2">
				<span class="mui-icon iconfont icon-zhinanzhen"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" tabindex="3">
				<span class="mui-icon iconfont icon-wode-active"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>
		<script type="text/javascript">
			var xinjianArray = [{
				pageId: "xinjian-chatlist.html",
				pageUrl: "xinjian-chatlist.html"
			}, {
				pageId: "xinjian-contact.html",
				pageUrl: "xinjian-contact.html"
			}, {
				pageId: "xinjian-discover.html",
				pageUrl: "xinjian-discover.html"
			}, {
				pageId: "xinjian-me.html",
				pageUrl: "xinjian-me.html"
			}];
			var xinjianStyle = {
				top: "44px",
				bottom: "50px"
			}
			mui.plusReady(function() {
				//禁止返回到登录页面
				mui.back = function() {
					return false;
				};
				//对网络连接进行事件监听
				netChangeSwitch();

				//获取当前的webview对象
				var indexWebview = plus.webview.currentWebview();
				//相当前的主页webview追加子页面4张webview对象
				for(var i = 0; i < xinjianArray.length; i++) {
					var xinjianPage = plus.webview.create(xinjianArray[i].pageUrl,
						xinjianArray[i].pageId,
						xinjianStyle);
					//隐藏webview窗口
					xinjianPage.hide();
					//追加每一个子页面到当前主页面
					indexWebview.append(xinjianPage);
				}
				plus.webview.show(xinjianArray[0].pageId);
				//批量绑定tap事件，展示不同的页面
				mui(".mui-bar-tab").on("tap", "a", function() {
					var tabindex = this.getAttribute("tabindex");
					//显示点击tab选项所对应的页面
					plus.webview.show(xinjianArray[tabindex].pageId, "fade-in", 200);
					//隐藏其他不需要的页面
					for(var i = 0; i < xinjianArray.length; i++) {
						if(i != tabindex) {
							plus.webview.hide(xinjianArray[i].pageId, "fade-out", 200);
						}
					}
				})
				setTimeout("initData()", "1000");

			})
			//监听网络状态更改
			function netChangeSwitch() {
					document.addEventListener("netchange", function(){
					// 网络的状态获取和判断
					var connectionStatus = plus.networkinfo.getCurrentType();
					if(connectionStatus != 0 && connectionStatus != 1) {
						//重新打开网络连接
						var xinjian_title = document.getElementById("xinjian_title")
						xinjian_title.innerHTML = '<b>信笺</b>';
					} else {
						//关闭网络连接
						var xinjian_title = document.getElementById("xinjian_title")
						xinjian_title.innerHTML = '<b>信笺(未连接)</b>';
					}
				});
			}
			//预加载
			function initData() {
				var xinjian_chatlist = plus.webview.getWebviewById("xinjian-chatlist.html");
				mui.fire(xinjian_chatlist, "refresh");
				var xinjian_me = plus.webview.getWebviewById("xinjian-me.html");
				mui.fire(xinjian_me, "refresh");
			}
		</script>
	</body>

</html>